<template>
  <main style="width:100%;">
    <header>
      <img
        src="../../../static/logo_green.png"
        alt
      />
    </header>
    <section class="content">
      <img
        src="../../../static/login_back.png"
        class="back_pic"
        alt
      />
      <div class="login-container">
        <div class="login-title">后勤管家系统</div>
        <div class="login-card">
          <div class="login-card-title">用户登录</div>
          <el-form
            :model="loginData"
            label-width="0px"
            class="login-form"
            style="margin-top:10px;"
            size="small"
            :rules="rules"
            ref="loginForm"
          >
            <el-form-item prop="userName">
              <el-input
                v-model="loginData.userName"
                class="login-input"
                prefix-icon="el-icon-user"
                placeholder="请输入您的账号"
              ></el-input>
            </el-form-item>
            <el-form-item prop="passWord">
              <el-input
                v-model="loginData.passWord"
                class="login-input"
                prefix-icon="el-icon-lock"
                placeholder="请输入您的密码"
                show-password
              ></el-input>
            </el-form-item>
            <!-- <el-form-item prop="idCode">
              <div class="login-ident-wrapper">
                <el-input
                  v-model="loginData.idCode"
                  size="mini"
                  placeholder="验证码"
                  style="width:100px;"
                ></el-input>
                <span style="width: 100px;height: 28px;text-align: center;line-height: 28px;background-color: #00BDAC;border-radius: 5px;color: #FFFFFF;">发送验证码</span>
              </div>
            </el-form-item> -->
            <el-form-item>
              <div class="login-password-op-wrapper">
                <input
                  type="checkbox"
                  name="isRemember"
                  class="login-checkbox"
                  v-model="loginData.isRemember"
                />记住密码
              </div>
            </el-form-item>
            <el-form-item>
              <el-button
                size="mini"
                class="greenButton login-button"
                @click="submit"
              >立即登录</el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </section>
  </main>
</template>

<script>
export default {
  data: function () {
    return {
      loginData: {
        userName: "",
        passWord: "",
        idCode: "",
        isRemember: true
      },

      rules: {
        role: [{ required: true, message: "请选择您的身份", trigger: "blur" }],
        userName: [
          { required: true, message: "请输入用户名", trigger: "blur" }
        ],
        passWord: [{ required: true, message: "请输入密码", trigger: "blur" }],
        // idCode: [{ required: true, message: "请输入验证码", trigger: "blur" }]
      },

      rolesOptions: [
        {
          value: 1,
          label: '部门'
        },
        {
          value: 2,
          label: '员工'
        },
        {
          value: 3,
          label: '设备'
        }
      ]
    };
  },

  methods: {
    submit() {
      this.$refs["loginForm"].validate(valid => {
        if (valid) {
          this.ajaxCommon.ajax({
            url: 'login',
            method: 'post',
            data: {
              u_account: this.loginData.userName,
              u_pass: this.loginData.passWord,
            },
            success: (res) => {
              if (res.code == 200) {
                console.log('登陆信息', res)
                localStorage.setItem("userName", this.loginData.userName);
                localStorage.setItem("userSatus", res.u_status);
                localStorage.setItem("uid", res.uid);
                this.ajaxCommon.token = res.uid;
                this.$router.push("/");
              } else {
                this.ajaxCommon.notice(res.status, 2);
              }
            }
          });
        }
      });
    }
  }
};
</script>

<style lang="less" scoped>
@font-face {
  font-family: FZLanTingHeiS-B-GB;
  src: url(../../../static/font/FZLanTingHeiS-B-GB.ttf);
}

main {
  height: 100%;
  width: 100%;
  min-height: 650px;

  header {
    height: 94px;
    display: flex;
    align-items: center;
    padding-left: 40px;
  }

  .content {
    position: relative;
    height: 78.13%;
    width: 100%;

    .back_pic {
      position: absolute;
      width: 100%;
      height: 100%;
      left: 50%;
      transform: translateX(-50%);
      z-index: 1;
    }

    .login-container {
      position: absolute;
      right: 0;
      height: 100%;
      padding: 28px 70px 0 0;
      box-sizing: border-box;
      width: 390px;
      z-index: 5;

      .login-title {
        font-family: FZLanTingHeiS-B-GB;
        color: #ffffff;
        font-size: 37px;
        text-shadow: 0px 0px 6px rgba(0, 150, 140, 0.48);
        margin-bottom: 25px;
        text-align: center;
        letter-spacing: 3px;
        height: 35px;
        width: 100%;
      }

      .login-card {
        width: 320px;
        height: auto;
        background: rgba(255, 255, 255, 1);
        box-shadow: 0px 0px 8px 0px rgba(128, 128, 128, 0.17);
        border-radius: 5px;
        padding: 40px 50px 40px 50px;
        box-sizing: border-box;

        .login-card-title {
          color: #717171;
          font-size: 14px;
          font-weight: bold;
        }

        .login-ident-wrapper {
          display: flex;
          justify-content: space-between;
          align-items: center;

          img {
            width: 50px;
            height: 24px;
          }

          a {
            color: #2eb6aa;
          }
        }

        .login-password-op-wrapper {
          display: flex;
          justify-content: space-between;
          align-items: center;

          .login-checkbox {
            vertical-align: middle;
            margin-left: 146px;
          }

          a {
            color: #d95185;
            text-decoration: none;
          }
        }

        .login-button {
          width: 100%;
        }

        .login-role-select {
          i {
            width: 25px;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
          }

          img {
            width: 13px;
            height: 13px;
          }
        }
      }
    }
  }
}
</style>

<style lang="less">
.login-input {
  input {
    border-top: none;
    border-left: none;
    border-right: none;
    border-radius: 0;
  }
}

.login-form {
  .el-form-item {
    margin-bottom: 14px;
  }
}
</style>
